<template>
  <div class="header relative">
    <div class="content-wrapper relative f0">
      <div class="avatar inline-block">
        <img :src="seller.avatar"
             alt=""
             width="64"
             height="64" />
      </div>
      <div class="content inline-block f14">
        <div class="title">
          <span class="brand inline-block"></span>
          <span class="name">{{ seller.name }}</span>
        </div>
        <div class="description f12">
          <span class="fw400">{{ seller.description }}</span>
          <i>/</i>
          <span class="fw400">{{ seller.deliveryTime }}分钟送达</span>
        </div>
        <div class="supports flex-def flex-cCenter"
             v-if="seller.supports && seller.supports.length">
          <span class="icon inline-block"
                :class="classMap[seller.supports[0].type]"></span>
          <span class="text f10 fw400 inline-block">{{
            seller.supports[0].description
          }}</span>
        </div>
      </div>
      <div class="supports-count t-c absolute poi flex-def flex-cCenter"
           v-if="seller.supports && seller.supports.length"
           @click.stop.prevent="show">
        <span class="num f10 inline-block fw300">{{
          seller.supports.length
        }}</span>
        <span class="icon icon-keyboard_arrow_right f10 fw300"></span>
      </div>
    </div>
    <div class="bulletin-wrapper relative f0 poi flex-def flex-cCenter"
         @click.stop.prevent="show">
      <span class="bulletin-title inline-block"></span>
      <span class="bulletin-text inline-block ellipsis f10 fw400">{{
        seller.bulletin
      }}</span>
      <span class="bulletin-icon absolute f12 icon-keyboard_arrow_right"></span>
    </div>
    <div class="background absolute wh100 top-left-0 zIndex-1">
      <img :src="seller.avatar"
           alt=""
           width="100%"
           height="100" />
    </div>
    <transition appear
                enter-active-class="animated fadeIn"
                leave-active-class="animated fadeOut"
                appear-active-class="animated fadeIn">
      <div class="detailShow fixed wh100 top-left-0 zIndex50"
           v-show="detailShow">
        <div class="detail-wrapper clearfix w100 inline-block">
          <div class="detail-main">
            <h3 class="f20 t-c fw400">{{ seller.name }}</h3>
            <div class="star-wrapper t-c">
              <star :size="48"
                    :score="seller.score"> </star>
            </div>
            <line-text :lineText="'优惠信息'"></line-text>
            <div class="supports-wrapper line-text margin-center-auto"
                 v-if="seller.supports && seller.supports.length">
              <supports :supports="seller.supports"></supports>
            </div>
            <line-text :lineText="'商家公告'"></line-text>
            <div class="bulletin margin-center-auto line-text">
              <p class="f12 fw300">{{ seller.bulletin }}</p>
            </div>
          </div>
        </div>
        <div class="detail-close relative margin-center-auto poi"
             @click.stop.prevent="hide">
          <span class="icon-close f35"></span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Star from 'components/Star/Star';
import LineText from 'components/LineText/LineText';
import Supports from 'components/Supports/Supports';
import { mixin, seller } from 'mixin';
export default {
  'mixins': [mixin, seller],
  'name': 'sell-header',
  data() {
    return { 'detailShow': false };
  },
  'components': { Star, LineText, Supports },
  created() {
    // data数据已经初始化，但是DOM结构渲染完成，组件没有加载
    this.detailShow = false;
  },
  mounted() {
    // DOM渲染完成，组件挂载完成
  },
  'computed': {},
  'methods': {
    hide() {
      this.detailShow = false;
    },
    show() {
      this.detailShow = true;
    }
  },
  'watch': {},
  beforeDestroy() {
    // 组件销毁
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/mixin'
.header
  color #ffffff
  background-color rgba(7, 17, 27, 0.4)
  .content-wrapper
    padding(24, 12, 18, 24)
    .avatar
      img
        border-radius 4px
    .content
      color rgb(255, 255, 255)
      margin(4, 0, 0, 16)
      .title
        .brand
          bg-image('brand', 30, 18)
        .name
          font-size 16px
          font-weight 550
          margin-left 6px
      .description
        margin(5, 0, 8, 0)
      .supports
        .icon
          &.decrease
            bg-image('decrease_1', 12, 12)
          &.discount
            bg-image('discount_1', 12, 12)
          &.guarantee
            bg-image('guarantee_1', 12, 12)
          &.invoice
            bg-image('invoice_1', 12, 12)
          &.special
            bg-image('special_1', 12, 12)
        .text
          margin-left 4px
          margin-top 2px
    .supports-count
      bottom 14px
      right 15px
      padding(0, 12, 0, 12)
      background-color rgba(0, 0, 0, 0.15)
      border-radius 14px
      .num
        display inline-block
        vertical-align middle
        margin-top 1px
      .icon
        margin-left 4px
        line-height 24px
  .bulletin-wrapper
    height 28px
    line-height 28px
    padding(0, 12, 0, 12)
    background-color rgba(7, 17, 27, 0.2)
    .bulletin-title
      bg-image('bulletin', 22, 12)
      flex 0 0 22px
    .bulletin-text
      margin(1, 10, 0, 6)
      letter-spacing 1.1px
    .bulletin-icon
      top 50%
      right 12px
      transform translateY(-50%)
  .background
    filter blur(8px)
  .detailShow
    background-color rgba(7, 17, 27, 0.65)
    backdrop-filter blur(5px)
    opacity 1
    overflow auto
    .detail-wrapper
      min-height 100%
      color #fff
      .detail-main
        margin-top 64px
        padding-bottom 64px
        .star-wrapper
          margin-top 18px
          margin-bottom 28px
          padding(2, 0, 2, 0)
        .supports-wrapper
          margin-top 25px
          margin-bottom 25px
        .bulletin
          margin-top 24px
          p
            padding(0, 12, 0, 12)
            line-height 1.65
            letter-spacing 1.3px
    .detail-close
      width 32px
      height 32px
      clear both
      margin-top -64px
      margin-bottom 0
</style>
